<template>
  <view class="game-account">
    <navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
    <!-- 入口 -->
    <view class="game-Entrance">
      <!-- 全屏图 -->
      <view class="game-Bimg">
        <image style="width:100%;padding:0;border:0;margin:0;height: auto;"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/litha-start.jpg" mode="widthFix">
        </image>
      </view>
      <!-- 开始按钮 -->
      <view class="start-btn" @click="hadleStartGame">
        <image style="width: 100%;"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/game-startbtn.png" mode="widthFix">
        </image>
      </view>
      <!-- 规则按钮-->
      <view class="game-rules" @click="hanldeOpenRules">
        <image style="width: 100%;"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/game-rules.png" mode="widthFix">
        </image>
      </view>
      <!-- 规则弹窗 -->
      <view class="rules-masking" v-if="rulesPop">
        <view class="rules-masking-con">
          <!-- 标题 -->
          <view class="rules-title">
            <image style="width: 100%;"
              src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/rules-title.png" mode="widthFix">
            </image>
          </view>
          <!-- 文字-->
          <view class="rules-text">
            <image style="width: 100%;"
              src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/rules-text.png" mode="widthFix">
            </image>
          </view>
          <!-- 知晓按钮 -->
          <view class="know-btn" @click="hanldeOffRules">
            <image style="width: 100%;"
              src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/gamerules-btn.png" mode="widthFix">
            </image>
          </view>
        </view>
      </view>

      <!-- 序言 -->
      <view class="preface-roll" v-if="preface">
        <image style="width: 100%;"
          src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/compress-0823/game-xuyan.gif"
          mode="widthFix">
        </image>
        <view @click="handlePreface">
          <image style="width:240rpx;height: 76rpx;"
            src="https://100000063-1252208446.file.myqcloud.com/images/litha/game/tiaoguo.png" mode="widthFix">
          </image>
        </view>
      </view>
    </view>
    <register-widget ref="registerWidgetRef" location="litha-game" />
  </view>
</template>

<script>
  import TabBar from '@/components/common/tabbar';
  import NavBar from '@/components/common/navbar';
  import onlineService from '@/components/common/onlineService';
  import api from '@/api/api';
  import registerWidget from "@/components/register/register-widget.vue"
  import {
    CUSTOMER_INFO,
  } from '@/utils/constant';
  import {
    SYSTEM_INFO,
    MERCHANT_INFO
  } from '@/utils/constant';
  const app = getApp();
  export default {
    components: {
      tabBar: TabBar,
      navBar: NavBar,
      registerWidget
    },
    data() {
      return {
        customTabbar: 1,
        tabbarTimeout: true,
        nowPages: 'pages/litha-launch/game/index',
        showSale: true,
        isShowCustomNavBar: true,
        // 组件所需的参数
        navbarData: {
          showCapsule: 0, //是否显示左上角图标   1表示显示    0表示不显示
          title: 'game主页', //导航栏 中间的标题
          newLogo: uni.getStorageInfoSync('storeLogo'),
          isTopFixed: true,
          showSearchAndBack: 1,
          whiteIcon: 1,
          hideSearch: 1,
        },
        isShowCustomNavBar: true,
        navbarInitTop: 0, //导航栏初始化距顶部的距离
        isFixedTop: false, //是否固定顶部
        rulesPop: false, //控制规则弹窗
        preface: false, //控制序言弹窗
        elementNum: 0,
      }
    },

    async onLoad(option) {
      let params = {
        path: '/pages/litha-launch/game',
        pageName: 'game首页',
        campaign: 'SZSH_LITHA_LAUNCH-2023'
      }
      getApp().cl_tracker.track('mini_program_view', params)
      wx.reportEvent("mini_program_view", {
        "eventdata": JSON.stringify(params),
        "pagename": params.pageName
      })

      // 神策埋点
      this.$commonSensors.lithaTrack.crTrack("LandingPageView", {
        "page_name": "Game落地页",
        "refer_source": "活动页/Game",
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": 'Interaction',
        "second_module_name": "Game"
      })

      this.getElement()

      // 序言弹窗
      if (uni.getStorageSync('preface')) {
        this.preface = false
        // 序言存在判断规则弹窗
        if (uni.getStorageSync('rules')) {
          this.rulesPop = false
        } else {
          this.rulesPop = true
        }
      } else {
        this.preface = true
        uni.setStorageSync("preface", true)
      }
    },


    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {
      var that = this;
      let systemInfomations = wx.getSystemInfoSync()
      // 机型适配比例系数
      that.scaleFactor = 750 / systemInfomations.windowWidth
      // 当前机型-window高度
      that.windowHeight = systemInfomations.windowHeight * that.scaleFactor //rpx
      // 当前机型-window宽度
      that.windowWidth = systemInfomations.windowWidth * that.scaleFactor //rpx
      // 屏幕的高度
      that.screentHeight = systemInfomations.screenHeight * that.scaleFactor //rpx
      // 导航栏的高度
      that.navigationHeight = 40 * that.scaleFactor //rpx
      // 状态栏高度
      that.statusBarHeight = (systemInfomations.statusBarHeight) * that.scaleFactor //rpx
      // 底部tabBar的高度
      that.tabBarHeight = Math.abs(that.screentHeight - that.statusBarHeight - that.navigationHeight - that
        .windowHeight)

      that.fixTop = that.navigationHeight + that.statusBarHeight

      let ratio = that.windowWidth / that.windowHeight
      if (ratio < 750 / 1334) {
        that.isIphoneX = true;
      }

    },
    onHide() {
      // 神策埋点
      this.$commonSensors.lithaTrack.cTrack("PageLeave", {
        "page_name": "活动页",
        "campaign": 'SZSH_LITHA_LAUNCH-2023',
        "first_module_name": 'Interaction',
        "second_module_name": "Game",
        "view_progress": 1
      })
    },
    methods: {
      // 查询元素
      async getElement() {
        let customerInfo = uni.getStorageSync("uniLoginInfo");
        if (!customerInfo || !customerInfo.openid) {
          await this.$commonFunction.commonUniLogin()
          customerInfo = uni.getStorageSync("uniLoginInfo")
          if(customerInfo?.openid && customerInfo?.unionId){
            that.$commonSensors.binduserid(customerInfo.openid, customerInfo.unionId)
          }
        }

        const json = await api.getElementStatus({
          method: "POST",
          query: {
            openId: customerInfo.openid
          }
        })

        if (json.code === 200 && json.data !== null) {
          this.elementNum = json.data.length
        }
      },
      // 打开规则弹窗
      hanldeOpenRules() {
        this.rulesPop = true

        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'game',
          "c_event_category_2": 'Interaction',
          "c_click_area": 'button/游戏规则'
        }
        getApp().commonClTrack('c_ebmp_draco_update_game_click_game_rules', Params)
        wx.reportEvent("c_ebmp_draco_update_game_click_game_rules", {
          "eventdata": JSON.stringify(Params)
        })

        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("InteractionPageOperation", {
          "page_name": "活动页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Interaction',
          "second_module_name": "Game",
          "operation_type": "点击",
          "button_name":"游戏规则"
        })
        this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '游戏规则', 'popup_name': '游戏规则弹窗', 'campaign': 'SZSH_LITHA_LAUNCH-2023'})
      },
      // 关闭规则弹窗
      hanldeOffRules() {
        this.rulesPop = false
        uni.setStorageSync("rules", true)
        //  神策埋点
        this.$commonSensors.lithaTrack.popupClick({
          'campaign':'SZSH_LITHA_LAUNCH-2023',
          'popup_type':'游戏规则',
          'popup_name':'游戏规则弹窗',
          'button_name':'关闭'
        })
      },
      // 开始游戏
      hadleStartGame() {
        let Params = {
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "c_event_category_1": 'game',
          "c_event_category_2": 'Interaction',
          "c_pagename": '游戏开始页面',
          "c_link_pagename": '游戏场景页',
          "c_link_path": '/pages/litha-launch/game/details'
        }
        getApp().commonClTrack('c_ebmp_draco_update_game_click_start', Params)
        wx.reportEvent("c_ebmp_draco_update_game_click_start", {
          "eventdata": JSON.stringify(Params)
        })

        // 神策埋点
        this.$commonSensors.lithaTrack.cTrack("InteractionPageOperation", {
          "page_name": "活动页",
          "campaign": 'SZSH_LITHA_LAUNCH-2023',
          "first_module_name": 'Interaction',
          "second_module_name": "Game",
          "operation_type": "点击",
          "button_name":"开始探索"
        })

        uni.navigateTo({
          url: '/pages/litha-launch/game/details'
        });
      },
      // 序言弹窗
      handlePreface() {
        // 关闭序言弹窗并存本地
        this.preface = false
        uni.setStorageSync("preface", true)

        // 判断规则弹窗是否需要弹出
        if (uni.getStorageSync('rules')) {
          this.rulesPop = false
        } else {
          this.rulesPop = true
        }
      },

      onShareAppMessage: async function(res) {
        let that = this
        let imageUrl = 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/Game-500_400.png'
        let path = '/pages/litha-launch/game'
        let title = '解锁新生图鉴，即刻步入麦卡伦庄园体验奇境探秘'
        this.$commonSensors.sensorsPageShare()
				this.$sr.setContext({ share_title: title || 'THE MACALLAN EBOUTIQUE麦卡伦' });
        return this.$commonFunction.commonShare(res, title, path, imageUrl)
      },
      onShareTimeline() {
				this.$sr.setContext({ share_title: '解锁新生图鉴，即刻步入麦卡伦庄园体验奇境探秘' });
        return {
          title: '解锁新生图鉴，即刻步入麦卡伦庄园体验奇境探秘',
          query: '',
          imageUrl: 'https://100000063-1252208446.file.myqcloud.com/images/litha/game/Game-500_400.png'
        };
      },
    }
  }
</script>

<style lang="less" scoped>
  .game-account {
    width: 100%;
    height: 100vh;

    .game-Entrance {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .game-Bimg {
      min-width: 750rpx;
      height: 100%;
      margin: 0;
      padding: 0;
      font-size: 0 !important;
      border: 0;
      line-height: 0;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .start-btn {
      position: absolute;
      width: 375rpx;
      height: 90rpx;
      bottom: 195rpx;
      left: 25%;
    }

    .game-rules {
      position: absolute;
      width: 78rpx;
      height: 77rpx;
      top: 230rpx;
      right: 37rpx;
      z-index: 999;
    }

    .rules-masking {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(5px);
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999;

      .rules-masking-con {
        width: 562rpx;
        height: 691rpx;
        background: url('https://100000063-1252208446.file.myqcloud.com/images/litha/game/game-rules-bg.png');
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .rules-title {
          width: 250rpx;
          height: 65rpx;
          margin-top: 75rpx;
        }


        .rules-text {
          width: 470rpx;
          height: 240rpx;
          margin-top: 75rpx;
        }

        .know-btn {
          width: 240rpx;
          height: 76rpx;
          margin-top: 75rpx;
        }
      }
    }

    .preface-roll {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(5px);
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 99;
    }
  }
</style>
